import React, {PureComponent} from 'react';
import {Table, Alert, Badge, Switch, Icon,Button, InputNumber, Tooltip, Popconfirm} from 'antd';
import styles from './index.less';
import {powerControl} from '../../../utils/powerControl';
const AuthButton = powerControl(Button);
const statusMap = ['default', 'processing'];

class GoodsTypeTable extends PureComponent {
    state = {
        selectedRowKeys: [],
        totalCallNo: 0,
    };

    componentWillReceiveProps(nextProps) {
        // clean state
        if (nextProps.selectedRows.length === 0) {
            this.setState({
                selectedRowKeys: [],
                totalCallNo: 0,
            });
        }
    }
    handleRecommendRow = (record, pagination) => {
        this.props.onRecommendRow(record,pagination);
    }

    handleRowSelectChange = (selectedRowKeys, selectedRows) => {
        const totalCallNo = selectedRows.reduce((sum, val) => {
            return sum + parseFloat(val.callNo, 10);
        }, 0);

        if (this.props.onSelectRow) {
            this.props.onSelectRow(selectedRows);
        }

        this.setState({selectedRowKeys, totalCallNo});
    }

    handleTableChange = (pagination, filters, sorter) => {
        this.props.onChange(pagination, filters, sorter);
    }

    handleDelRow = (catId, pagination) => {
        this.props.onDelRow(catId, pagination);
    }
    handleEditRow = (record, pagination) => {
        this.props.onEditRow(record, pagination);
    }

    render() {
        const {selectedRowKeys, totalCallNo} = this.state;
        const {data: {list, pagination}, loading} = this.props;

        const status = ['删除', '在用'];
        const isShow = ['不显示', '显示'];

        const columns = [
            {
                title: '分类名称', dataIndex: 'cat_name',//分类名称
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.cat_alias_name}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '状态',
                dataIndex: 'cat_sts',//分类状态：1在用，0删除
                filters: [
                    {
                        text: status[1],
                        value: 1
                    },
                    {
                        text: status[0],
                        value: 0,
                    }
                ],
                render(val) {
                    return <Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="cross"/>}
                                   defaultChecked={val} checked={val}/>;
                },
            },
            // {
            //     title: '关键字', dataIndex: 'keywords'//分类的关键字
            // },
            // {
            //     title: '描述', dataIndex: 'cat_desc'//分类描述
            // },
            {
                title: '导航栏', dataIndex: 'show_in_nav',//是否显示在导航栏,0不;1显示
                render(val) {
                    return <Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="cross"/>}
                                   defaultChecked={val} checked={val}/>;
                },
            },
            {
                title: '页面显示', dataIndex: 'is_show',//是否在前台页面显示 1显示; 0不显示
                render(val) {
                    return <Switch checkedChildren={<Icon type="check"/>} unCheckedChildren={<Icon type="cross"/>}
                                   defaultChecked={val} checked={val}/>;
                },
            },
            {
                title: '价格分级', dataIndex: 'grade',//该分类的最高和最低价之间的价格分级,当大于1时,会根据最大最小价格区间分成区间,会在页面显示价格范围,如0-300,300-600,600-900这种;
                render: (val, record) => (
                    <InputNumber min={0} defaultValue={val} value={val} size={5}/>
                )
            },
            // {
            //     title: '属性过滤', dataIndex: 'filter_attr'//如果该字段有值,则该分类将还会按照该值对应在表goods_attr的goods_attr_id所对应的属性筛选，如，封面颜色下有红，黑分类筛选
            // },
            // {
            //     title: '分类样式图标', dataIndex: 'style_icon'//分类样式图标
            // },
            // {
            //     title: '分类图标', dataIndex: 'cat_icon'//分类图标
            // },
            // {
            //     title: '拼音关键字', dataIndex: 'pinyin_keyword'//拼音关键字
            // },
            // {
            //     title: '分类别名', dataIndex: 'cat_alias_name'//分类别名
            // },
            {
                title: '排序', dataIndex: 'sort_order',//排序
                render: (val) => (
                    <InputNumber min={1} max={100} defaultValue={val} value={val} size={3}/>
                )
            },
            // {
            //     title: '触摸版图标', dataIndex: 'touch_icon'//触摸版图标
            // },
            {
                title: '操作',
                render: (val, record) => (
                    <p>
                        <AuthButton ghost size="small" auth="goodsManage.recommend" className={styles.btn}  onClick={() => this.handleRecommendRow(record, pagination)}>推荐</AuthButton>
                        <span className={styles.splitLine}/>
                        <AuthButton ghost size="small" className={styles.btn} auth="category.edit" onClick={() => this.handleEditRow(record, pagination)}>编辑</AuthButton>
                        <span className={styles.splitLine}/>
                        <Popconfirm title="是否确定删除?" onConfirm={() => this.handleDelRow(record.cat_id, pagination)}>
                            <AuthButton ghost size="small" className={styles.btn} auth="category.delete">删除</AuthButton>
                        </Popconfirm>
                    </p>
                ),
            },
        ];

        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            ...pagination,
        };

        const rowSelection = {
            selectedRowKeys,
            onChange: this.handleRowSelectChange,
            getCheckboxProps: record => ({
                disabled: record.disabled,
            }),
        };

        return (
            <div className={styles.standardTable}>
                <Table
                    loading={loading}
                    rowKey={record => record.cat_id}
                    // rowSelection={rowSelection}
                    dataSource={list}
                    columns={columns}
                    pagination={paginationProps}
                    onChange={this.handleTableChange}
                />
            </div>
        );
    }
}

export default GoodsTypeTable;
